<template>
    <div class="detail" :style="{height: screenHeight -104 + 'px'}">    
        <div class="detail-cont">
            <div class="detail-cont__ovfl">
                <h4>{{title}}</h4>
                <div class="highlight" v-html="compiledMarkdown" v-highlight></div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import marked from 'marked'

export default {
    name: "detail",

    data(){
        return {
            content: '暂未内容',
            title: '',
            screenHeight: document.documentElement.clientHeight
        }
    },

    computed: {
        compiledMarkdown(){
            return marked(this.content);
        }
    },

    created() {
        let param = {
            "body": {
                id: this.$route.query.id
            }
        }
        axios({
            method: "post",
            url: `/api/detail`,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: {
                data: JSON.stringify(param)
            }
        }).then((res)=>{
            // console.log(res);
            let {data} = res.data;
            if(res.data.code == 200) {
                this.title = data[0].title;
                this.content = data[0].content;
            }
        }).catch((err)=>{
            console.log(err);
        })
    },
}
</script>

<style lang="less">
    .detail {
        display: flex;
        margin: 20px 20px 20px 88px;
        border: 1px solid #e5e5e5;
        padding: 20px;
        background: #fff;
        overflow: hidden;
    }
    .detail-cont {
        width: 100%;
        overflow: hidden;
        &__ovfl {
            > h4 {
                text-align: center;
                font-size: 20px;
                line-height: 30px;
                margin-bottom: 30px;
            }
            width: 102%;
            height: 100%;
            overflow-y: scroll;
        }
    }
</style>

